<template>
  <div>
    <el-header>
      <div style="width: 100%">
        <el-row>
          <div>
            <el-col :span="2">
              <i class="el-icon-s-home" style="font-size: 35px;cursor: pointer" @click="router_home" />
            </el-col>
            <el-col :span="4">
              <label>导图名称：</label>
              <el-input v-model="formData.mindName" style="width: 120px" />
            </el-col>

            <el-col :span="4">
              <label>主题：</label>
              <el-select v-model="theme_value" style="width: 100px" @change="set_theme">

                <template v-for="(item,index) in themOptions">
                  <el-option :key="index" :value="item" :label="item" />
                </template>
              </el-select>
            </el-col>
          </div>

          <div>
            <el-col :span="2">
              <el-button type="primary" class="noimpor-btn" @click="editNode"><i class="el-icon-edit" /> 编辑节点</el-button>
            </el-col>
            <el-col :span="2">
              <el-button ref="zoomOut" type="primary" class="noimpor-btn" @click="zoomOut"><i class="el-icon-zoom-out" /> 缩小</el-button>
            </el-col>
            <el-col :span="2">
              <el-button ref="zoomIn" type="primary" class="noimpor-btn" @click="zoomIn"><i class="el-icon-zoom-in" /> 放大</el-button>
            </el-col>
            <el-col :span="2" :offset="1">
              <el-button type="primary" class="common-btn" :disabled="issave === 'false'?true:false" @click="saveMind"><i class="el-icon-s-claim" /> 保存</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" class="danger-btn" :disabled="isdelete === 'false'?true:false" @click="deleteMind"><i class="el-icon-delete" /> 删除</el-button>
            </el-col>
            <el-col :span="2" :offset="1">
              <div class="user_phone">{{ user }}</div>
            </el-col>
          </div>
        </el-row>
      </div>
    </el-header>

    <js-mind v-show="isShow" id="jsmind" ref="jsMind" :values="mind" :options="options" :height="mindHeight" />

    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"
      title="编辑节点"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item label="字体大小">
              <el-input v-model="nodeOption.fontSize" style="width: 60%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字体加粗">
              <el-select v-model="nodeOption.fontWeight" style="width: 60%">
                <el-option value="normal" label="标准" />
                <el-option value="bold" label="粗体" />
                <el-option value="bolder" label="更粗" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字体样式">
              <el-select v-model="nodeOption.fontStyle" style="width: 60%">
                <el-option value="normal" label="标准" />
                <el-option value="italic" label="斜体" />
                <el-option value="oblique" label="倾斜" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="背景颜色">
              <el-color-picker v-model="nodeOption.bgColor" show-alpha :predefine="predefineColors" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字体颜色">
              <el-color-picker v-model="nodeOption.fontColor" show-alpha :predefine="predefineColors" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="节点内容">
            <el-input v-model="nodeOption.content" type="textarea" :rows="5" style="width:85%;" />
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="common-btn" @click="sureEditNode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

require('../../assets/js/jsmind.menu.js')
export default {
  name: 'Jsmind',
  data() {
    return {
      user: null,
      // id:null,
      drawer: false,
      dialogVisible: false,
      direction: 'rtl',
      theme_value: 'primary',
      nodeOption: {
        content: '',
        bgColor: '',
        fontColor: '',
        fontSize: '',
        fontWeight: '',
        fontStyle: ''
      },
      mindHeight: '100vh',
      themOptions: ['primary', 'warning', 'danger', 'success', 'info', 'greensea', 'nephrite', 'belizehole', 'wisteria', 'asphalt', 'orange', 'pumpkin', 'pomegranate', 'clouds', 'asbestos'],
      mind: {
        meta: {
          name: 'jsMind remote',
          author: 'hizzgdev@163.com',
          version: '0.2'
        },
        format: 'node_tree',
        data: {
          id: 'root',
          topic: 'jsMind'
        }
      },
      options: {
        container: 'jsmind_container', // [必选] 容器的ID
        editable: false, // [可选] 是否启用编辑
        theme: 'orange', // [可选] 主题
        support_html: true,
        menuOpts: {
          showMenu: true,
          tipContent: '请选中节点！！！',
          injectionList: [
            {
              target: 'edit', text: '编辑节点名称',
              callback: function(node) {
                console.log(node)
              }
            },
            {
              target: 'addChild', text: '添加子节点',
              callback: function(node) {
                console.log(node)
              }
            },
            {
              target: 'addBrother', text: '添加兄弟节点',
              callback: function(node) {
                console.log(node)
              }
            },
            {
              target: 'delete', text: '删除节点',
              callback: function(node, next) {
                console.log(node)
              }
            },

            {
              target: 'showAll', text: '展开全部节点',
              callback: function(node, next) {
                console.log(node)
              }
            },
            {
              target: 'hideAll', text: '收起全部节点',
              callback: function(node, next) {
                console.log(node)
              }
            }
          ]

        }

      },
      issave: 'true',
      isdelete: 'false',
      formData: {
        id: '',
        // mindCode: '',
        mindName: '',
        // mindType: '',
        mindData: '',
        mindOptions: ''
      },
      mindOptions: {
        theme: ''
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      isShow: true,
      isLoad: false
    }
  },
  created() {
    // this.formData.id=this.$route.query.id
    this.formData.id = 5
    if (this.formData.id != null) {
      this.getMind()
      this.if_create()
    } else {

    }
    this.if_login()
  },
  mounted() {
    this.jm = this.$refs.jsMind.jm
    this.jm.enable_edit()
    this.jm.enable_event_handle('dblclick')
  },
  methods: {
    // 判断是否登陆
    if_login() {
      const that = this
      that.$axios({
        method: 'get',
        url: 'if_login'
      }).then((res) => {
        const result = res.data
        if (result === '未登录') {
          alert('请先登陆')
        } else {
          that.user = '**' + result.toString().substring(7, 11)
        }
      })
    },
    router_home() {
      this.$router.push({
        path: 'home_page'
      })
    },
    // 判断是否是此知识图谱创建者
    if_create() {
      this.$axios.get('if_create', {
        params: {
          id: this.formData.id
        }
      }).then((res) => {
        const result = res.data
        console.log(result)
        if (result === true) {
          this.issave = 'true'
          this.isdelete = 'true'
        } else {
          this.issave = 'false'
          this.isdelete = 'false'
        }
      })
    },

    // 缩小
    zoomOut() {
      if (this.jm.view.zoomOut()) {
        this.$refs.zoomOut.disabled = false
      } else {
        this.$refs.zoomOut.disabled = true
      }
    },
    // 放大
    zoomIn() {
      if (this.jm.view.zoomIn()) {
        this.$refs.zoomIn.disabled = false
      } else {
        this.$refs.zoomIn.disabled = true
      }
    },
    // 新增节点
    addNode() {
      const selectedNode = this.jm.get_selected_node() // as parent of new node
      if (!selectedNode) {
        this.$message({
          type: 'warning',
          message: '请先选择一个节点!'
        })
        return
      }
      const nodeid = this.jsMind.util.uuid.newid()
      const topic = 'new Node'
      this.jm.add_node(selectedNode, nodeid, topic)
    },
    // 编辑节点
    editNode() {
      const selectedId = this.get_selected_nodeid()
      if (!selectedId) {
        this.$message({
          type: 'warning',
          message: '请先选择一个节点!',
          duration: 1000
        })
        return
      }
      const nodeObj = this.jm.get_node(selectedId)
      this.nodeOption.content = nodeObj.topic
      this.nodeOption.bgColor = nodeObj.data['background-color']
      this.nodeOption.fontColor = nodeObj.data['foreground-color']
      this.nodeOption.fontSize = nodeObj.data['font-size']
      this.nodeOption.fontWeight = nodeObj.data['font-weight']
      this.nodeOption.fontStyle = nodeObj.data['font-style']
      this.dialogVisible = true
    },
    sureEditNode() {
      const selectedId = this.get_selected_nodeid()
      this.jm.update_node(selectedId, this.nodeOption.content)
      this.jm.set_node_font_style(selectedId, this.nodeOption.fontSize, this.nodeOption.fontWeight, this.nodeOption.fontStyle)
      this.jm.set_node_color(selectedId, this.nodeOption.bgColor, this.nodeOption.fontColor)
      this.nodeOption = {
        content: '',
        bgColor: '',
        fontColor: '',
        fontSize: '',
        fontWeight: '',
        fontStyle: ''
      }
      this.dialogVisible = false
    },
    // 删除节点
    onRemoveNode() {
      const selectedId = this.get_selected_nodeid()
      if (!selectedId) {
        this.$message({
          type: 'warning',
          message: '请先选择一个节点!'
        })
        return
      }
      this.jm.remove_node(selectedId)
    },
    // 布局方向
    changeOption() {
      if (this.options.mode === 'side') {
        this.options = {
          mode: 'full'
        }
      } else {
        this.options = {
          mode: 'side'
        }
      }
    },
    // 选择主题颜色
    set_theme() {
      this.jm.set_theme(this.theme_value)
    },
    // 获取选中标签的 ID
    get_selected_nodeid() {
      const selectedNode = this.jm.get_selected_node()
      if (selectedNode) {
        return selectedNode.id
      } else {
        return null
      }
    },
    getMind() {
      this.$axios.get('get_mind_id', {
        params: {
          id: this.formData.id
        }
      }).then((res) => {
        this.formData = res.data
        console.log(res.data)
        if (this.formData.mindOptions !== '') {
          this.theme_value = JSON.parse(this.formData.mindOptions).theme
          this.set_theme()
        }
        this.jm.show(JSON.parse(res.data.mindData))
      }).catch(err => {
        console.log(err)
      })
    },
    saveMind() {
      if (this.formData.mindName === '') {
        this.$message({ type: 'warning', message: '导图名称不能为空!' })
        return
      }
      this.mindOptions.theme = this.theme_value
      this.formData.mindOptions = JSON.stringify(this.mindOptions)
      this.formData.mindData = JSON.stringify(this.jm.get_data())
      let url
      console.log(this.formData.id)
      if (this.formData.id === undefined) {
        url = 'save_mind'
      } else {
        url = 'update_mind'
      }

      this.$axios.post(url, this.$qs.stringify(this.formData)
      ).then(res => {
        if (res.data === '保存失败') {
          this.$message({
            type: 'error',
            message: '保存失败!'
          })
        }
        if (res.data === '知识图谱保存成功') {
          this.$message({
            type: 'success',
            message: '知识图谱保存成功!'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    deleteMind() {
      this.$confirm('您确定要删除该导图吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'delete_mind_id'
        this.$axios.get(url, {
          params: {
            id: this.formData.id
          }
        }).then((res) => {
          const result = res.data
          if (result === '删除成功') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
          this.$router.push('/jsmind')
          location.reload()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
/*body{*/
/*  padding: 10px;*/
/*  margin: 0px;*/
/*}*/
/*.header{*/
/*  height: 40px;*/
/*  background-color: #eee;*/
/*  border-bottom: solid 1px #aaa;*/
/*  z-index: 100;*/
/*}*/
.el-main{
  padding: 0;
}
.el-header{
  padding: 10px;
  width: 100%;
  height: 40px !important;
  display: flex;
  /*line-height: 40px;*/
  align-items: center;
  z-index: 3;
  position:fixed;
  margin-top: 10px;

}
.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  overflow: hidden;
  background-color: #f2f2f2;
  border-top: solid 1px #bbb;
}
.user_phone{
  line-height: 40px;
  width: 80px;
  height: 40px;
}

</style>
